<template>
    <div class="popup-bottom">
        <van-field class="frae" v-model="value" placeholder="发一条友善的评论" />
        <div class="icon">
            <van-icon name="comment-o" />
            <van-icon v-show="isIcon2" @click="coll" class="vanIcon" name="star" />
            <van-icon v-show="!isIcon2" @click="coll" class="vanIcon" name="star-o" />
            <van-icon v-show="isIcon1" @click="getGive" class="vanIcon" name="good-job" />
            <van-icon v-show="!isIcon1" @click="getGive" class="vanIcon" name="good-job-o" />
            <van-icon class="vanIcon" name="share" />
        </div>

    </div>
</template>

<script>
import { yesDetail, notDetail } from '@/request/api/home.js'
export default {
    data() {
        return {
            value: '',
            isIcon1: false,
            isIcon2: false,
            detailId: '',

        }
    },
    created() {
        this.detailId = this.$parent.detailId;
    },
    methods: {
        async coll() {
            if (!this.isIcon2) {
                let result = await yesDetail({
                    article_id: this.detailId,
                    user_id: localStorage.getItem('user_id')
                })
                if (result.data.msg == '收藏成功') {
                    this.isIcon2 = !this.isIcon2;
                    this.$toast(result.data.msg);
                }
            } else {
                let data = await notDetail({
                    article_id: this.detailId,
                    user_id: localStorage.getItem('user_id')
                })
                if (data.data.msg) {
                    this.isIcon2 = !this.isIcon2;
                    this.$toast(data.data.msg);
                }
            }
        },
        getGive() {
            this.isIcon1 = !this.isIcon1;
        }

    }
}
</script>

<style lang="less" scoped>
.popup-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ccc;
    background-color: #fff;

    .frae {
        width: 48%;
        height: 30px;
        border-radius: 20px;
        margin: 0 1%;
        outline: 1px solid #e7e7e7;
        line-height: 0;
    }

    .icon {
        width: 50%;
        display: flex;
        justify-content: space-around;

        .vanIcon {
            font-size: 20px;
        }
    }
}
</style>